<%- include('./layouts/header.ejs')%>

  <div class="main">
    <%- include('./layouts/navBar.ejs')%>
    <div class="container-fluid">
      <div class="page-title">
        <h1>写文章</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <form class="row" id="myForm">
        <input type="hidden" value="<%= posts.id %>" name="id">
        <input type="hidden" value="<%= posts.user_id %>" name="user_id">
        <div class="col-md-9">
          <div class="form-group">
            <label for="title">标题</label>
            <input id="title" class="form-control input-lg" value="<%= posts.title%>"  name="title" type="text" placeholder="文章标题">
          </div>
          <div class="form-group">
            <label for="content">内容</label>
            <textarea id="content" class="form-control input-lg" name="content" cols="30" rows="10" placeholder="内容">
            <%= posts.content%></textarea>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="slug">别名</label>
            <input id="slug" class="form-control" name="slug" value="<%= posts.slug%>" type="text" placeholder="slug">
            <p class="help-block">https://zce.me/post/<strong>slug</strong></p>
          </div>
          <div class="form-group">
            <label for="feature">特色图像</label>
            <!-- show when image chose -->
            <% if(posts.feature){%>
            <img class="help-block thumbnail" src="<%= posts.feature%>">
            <%}else {%>
              <img class="help-block thumbnail" style="display:none">
            <%}%>
            <input id="feature" class="form-control" name="feature" type="file">
            
          </div>
          <div class="form-group">
            <label for="category">所属分类</label>
            <select id="category" class="form-control" name="category_id">
              <% categories.forEach(item=>{%>
              <option value="<%= item.name%>" <%if(posts.category_id==item.id){%> selected<%}%>   ><%= item.name%></option>
              <%})%>
            </select>
          </div>
          <div class="form-group">
            <label for="created">发布时间</label>
            <input id="created" class="form-control" value="<%= posts.created.replace(" ","T")%>" name="created" type="datetime-local">
          </div>
          <div class="form-group">
            <label for="status">状态</label>
            <select id="status" class="form-control" name="status">
              <option value="drafted" <%if(posts.status=='drafted'){%> selected <%}%> >草稿</option>
              <option value="published" <%if(posts.status=='published'){%> selected <%}%>>已发布</option>
              <option value="trashed" <%if(posts.status=='trashed' ){%> selected
                <%}%>  >回收站</option>
            </select>
          </div>
          <div class="form-group">
            <!-- <button class="btn btn-primary" type="submit">保存</button> -->
            <span class="btn btn-primary" id="btnUpdate">更新</span>
          </div>
        </div>
      </form>
    </div>
  </div>

  <%- include('./layouts/aside.ejs')%>

  <%- include('./layouts/footer.ejs')%>
  <script>
    // 1. 更新文章之图片上传
    // 1.1  注册事件
    $('#feature').on('change',function(){

      // 1.2 准备FormData对象
      var data = new FormData()
      data.append('feature',this.files[0])

      // 1.3  发送ajax请求
      $.ajax({
        type:'post',
        url:'/uploadFileOfPostsEdit',
        data:data,
        contentType:false, // 默认不要使用原来的编码方式
        processData:false, // 不要再进行二进制的转换
        dataType:'json',
        success:function(res){
          // 
          console.log(res);
          if(res&&res.code==0){
            // 让图片显示在页面上
            $('.thumbnail').show().attr('src',res.src)
            .after("<input type='hidden' value='"+res.src+"' name='feature'>")
            // 还要将图片链接存在隐藏域中,以备更新使用
          }
        }
      })
    })
  
    // 2. 更新文章
    // 2.1 注册事件
    $('#btnUpdate').on('click',function () {
      
      // 2.2 发送ajax请求
      $.ajax({
        type:'post',
        url:'/updatePostsInfo',
        data:$('#myForm').serialize(),
        dataType:'json',
        success:function(res){
          console.log(res);
          // 刷新当前页面
          if(res&&res.code==0){
            location.reload(true); // 相当于是重新刷新 页面
          }
        }
      })
    })
  </script>
